<template>
  <div>
    <!--拼团订单 -->
    <!-- 全部按钮 -->
    <el-row>
      <el-col :span="24">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="groupIng">拼团中</el-radio-button>
          <el-radio-button label="group">已成团</el-radio-button>
          <el-radio-button label="lose">已失效</el-radio-button>
          <el-radio-button label="nonPayment">未付款</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3">
        <div class="grid-content bg-purple">
          <span style="color:#8492a6; ">拼团编号</span>
          <el-input
            style="margin-top:5px "
            v-model="Group_Num"
            placeholder="拼团编号"
          ></el-input>
        </div>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
        ><div class="grid-content bg-purple">
          <span style="color:#8492a6; ">团长用户名</span>
          <el-input
            style="margin-top:5px "
            v-model="Commander_Name"
            placeholder="用户名"
          ></el-input></div
      ></el-col>
      <el-col
        :xs="8"
        :sm="8"
        :md="6"
        :lg="6"
        :xl="6"
        style="min-width:420px;margin-right:-5px;"
        ><div class="grid-content bg-purple">
          <el-date-picker
            style="margin-top:24px "
            v-model="Time_Value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker></div
      ></el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" style="margin-left:-5px;"
        ><div class="grid-content bg-purple">
          <el-button
            style="margin-top:23px "
            type="primary"
            icon="el-icon-search"
            >搜索</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-row :gutter="10" style="margin-top:10px">
      <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" style="padding-right:0px"
        ><div class="grid-content bg-purple">
          <el-dropdown @command="Order_Export">
            <el-button type="primary">
              导出订单<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">导出所有</el-dropdown-item>
              <el-dropdown-item command="Pitch">导出选中</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div></el-col
      >
    </el-row>

    <el-table
      border
      ref="multipleTable"
      :data="Order_tableData"
      tooltip-effect="dark"
      style="width: 100% ; margin:10px 0"
      @selection-change="Order_tableData_Change"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="name" label="拼团编号"> </el-table-column>
      <el-table-column prop="name" label="商品名称"> </el-table-column>
      <el-table-column prop="name" label="成团人数"> </el-table-column>
      <el-table-column prop="name" label="来源"> </el-table-column>
      <el-table-column prop="name" label="拼团状态"> </el-table-column>
      <el-table-column prop="name" label="开团时间"> </el-table-column>
      <el-table-column prop="name" label="结束时间"> </el-table-column>
    </el-table>

    <!-- 分页 -->

    <el-pagination
      @size-change="Group_Order_SizeChange"
      @current-change="Group_Order_CurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],

  data() {
    return {
      tabPosition: "all",
      // 拼团编号
      Group_Num: "",
      // 用户名
      Commander_Name: "",
      // 订单数据
      Order_From: [
        {
          value: "选项1",
          label: "全部",
        },
        {
          value: "选项2",
          label: "普通订单",
        },
        {
          value: "选项3",
          label: "定金预售",
        },
        {
          value: "选项4",
          label: "全部预售",
        },
        {
          value: "选项5",
          label: "虚拟商品订单",
        },
      ],
      // 订单类型数据
      Order_Type: "",
      // 时间
      Time_Value: "",

      // 表单数据
      Order_tableData: [],

      // 表单勾选的内容
      Order_tableData_list: [],
      //   分页当前显示的页面
      currentPage: 1,
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 导出订单、
    Order_Export(command) {
      console.log(command);
    },
    // 选中单选框数据
    Order_tableData_Change(val) {
      this.Order_tableData_list = val;
    },
    // 分页
    Group_Order_SizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    Group_Order_CurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

  watch: {},
};
</script>
<style lang="" scoped></style>
